<template>
  <div :class="className">
    <div class="main">
      <div
        class="title-line  border-l-4 border-blue-500 pl-4 text-xl font-bold"
      >
        明星企业
      </div>
      <div v-if="companyList.length > 0" class="module-box">
        <div
          v-for="item in companyList"
          :key="item.id"
          class="info-item"
          @click="toCompanyDetail(item)"
        >
          <div
            class="left"
            :style="{
              background: `url(${item.mainImg})`,
              'background-size': 'contain',
              'background-position': 'center center',
              'background-repeat': 'no-repeat',
            }"
          ></div>
          <div class="right">
            <div>
              <h6 class="info-title">
                {{ item.title }}
              </h6>
              <p class="text-gray-400 py-2">
                {{ item.dynamicInfo }}
              </p>
            </div>

            <div class="text-gray-400">
              <i class="el-icon-time"> </i>
              <span>
                {{ item.releaseTime }}
              </span>
            </div>
          </div>
        </div>

        <div
          v-if="isGeMore"
          @click="getList"
          class="flex flex-col justify-center w-full h-12 mt-16 bg-blue-400 text-center cursor-pointer "
        >
          <span class="text-white"> 加载更多 </span>
        </div>
        <div
          v-if="!isGeMore"
          class="flex flex-col justify-center w-full h-12 mt-16 bg-gray-200 text-center  "
        >
          <span class="text-gray-400"> 暂无更多 </span>
        </div>
      </div>
      <div
        v-if="companyList.length <= 0"
        class="pb-8 m-auto text-xl text-center text-gray-500"
      >
        暂无数据
      </div>
    </div>
    <div class="asider">
      <div class="box introduce mb-8">
        <div class="flex">
          <h4 class="flex-grow">区域介绍</h4>
          <span class="text-gray-400 cursor-pointer" @click="toArea">
            查看更多
          </span>
        </div>
        <div v-html="areaIntroduce.remark" class="content "></div>
      </div>

      <AttractCard />
    </div>
  </div>
</template>

<script>
import { getStarCompanyList } from '@/api/windowCity/getCityInfo'
import AttractCard from '../AttractCard.vue'
export default {
  components: {
    AttractCard,
  },
  props: {
    className: {
      type: String,
      default: 'hidden',
    },
    areaIntroduce: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      companyList: [],
      tableTotal: 0,
      queryParms: {
        pageSize: 10,
        pageNum: 1,
      },
    }
  },
  computed: {
    isGeMore() {
      let infoLength = this.companyList.length
      if (this.tableTotal > infoLength) {
        return true
      } else {
        return false
      }
    },
  },
  created() {
    this.getList()
  },
  methods: {
    toArea() {
      this.$emit('toAreaIntroduce')
    },
    toCompanyDetail(item) {
      let locationId = this.$route.params.id
      let companyDetailId = parseInt(item.id)

      this.$router.push({
        path: `/locationCity/${locationId}/locationCompanyDetail/${companyDetailId}`,
      })
    },
    getList() {
      let queryParms = {
        ...this.queryParms,
        cityId: this.$route.params.id,
      }
      getStarCompanyList(queryParms).then((res) => {
        if (res.code === 200) {
          this.companyList = [...this.companyList, ...res.rows]
          this.tableTotal = res.total
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  @apply flex-grow  pr-4;

  .video-box {
    height: 448px;
  }

  .module-box {
    .nav-line {
      @apply flex p-4;
    }
    .info-item {
      width: 100%;
      height: 216px;
      padding: 16px 0;
      cursor: pointer;
      @apply flex mb-2 rounded-md border-b transition-all duration-300  transform;
      &:hover {
        // box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
        @apply shadow-md;
      }

      .left {
        height: 100%;
        min-width: 271px;
      }
      .right {
        padding: 16px;
        @apply flex flex-col justify-between;

        .info-title {
          width: 100%;
          height: 3rem;
          line-height: 1.5rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }

  // 区域政策

  .title-line {
  }
}
.line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.asider {
  min-width: 430px;
  width: 430px;
  min-height: 200px;
  // background-color: aqua;
  .box {
    border-top: solid 2px #f08519;
    @apply px-4 py-8 border-2  overflow-hidden rounded-md;
  }
  .introduce {
    height: 448px;

    .content {
      height: 360px;
      line-height: 1.8rem;
      @apply w-full text-gray-500 py-4  overflow-ellipsis overflow-hidden;
    }
  }
}
</style>
